<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多模型查看器</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #model-container { 
            width: 100%; 
            height: 100vh; 
        }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        button {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        .model-list {
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
        .model-item {
            padding: 5px;
            margin: 2px 0;
            background-color: #f0f0f0;
            border-radius: 3px;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div id="model-container"></div>
    
    <!-- 控制面板 -->
    <div id="controls">
        <h3>多模型查看器</h3>
        <button id="add-gltf">添加GLTF模型</button>
        <button id="add-glb">添加GLB模型</button>
        <button id="clear-all">清除所有模型</button>
        
        <div class="model-list" id="model-list">
            <!-- 已加载模型将在这里显示 -->
        </div>
    </div>
    
    <!-- 使用旧版本的 Three.js (r124) -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/controls/OrbitControls.js"></script>
    
    <!-- 引入我们的模型查看器代码 -->
    <script src="./js/gltf-viewer.js"></script>
    
    <script>
        // 初始化查看器
        const viewer = initModelViewer('model-container');
        
        // 示例模型URL - 这些需要更改为实际的模型路径
        const sampleModels = {
            gltf: [
                './model/nexbot_robot_character_concept.gltf'
            ],
            glb: [
                './model/cat1.glb',
                './model/cat2.glb'
            ]
        };
        
        // 当前已加载的模型计数
        let modelCount = 0;
        
        // 添加GLTF模型的按钮事件
        document.getElementById('add-gltf').addEventListener('click', function() {
            // 从示例中选择一个GLTF模型
            const modelUrl = sampleModels.gltf[modelCount % sampleModels.gltf.length];
            
            // 计算新模型的位置 (每个模型相隔2个单位)
            const position = { x: modelCount * 2, y: 0, z: 0 };
            
            // 加载模型
            viewer.loadModel(modelUrl, position);
            
            // 更新模型列表
            updateModelList(`GLTF模型 ${modelCount + 1}`, modelUrl);
            
            modelCount++;
        });
        
        // 添加GLB模型的按钮事件
        document.getElementById('add-glb').addEventListener('click', function() {
            // 从示例中选择一个GLB模型
            const modelUrl = sampleModels.glb[modelCount % sampleModels.glb.length];
            
            // 计算新模型的位置 (每个模型相隔2个单位)
            const position = { x: modelCount * 2, y: 0, z: 0 };
            
            // 加载模型
            viewer.loadModel(modelUrl, position);
            
            // 更新模型列表
            updateModelList(`GLB模型 ${modelCount + 1}`, modelUrl);
            
            modelCount++;
        });
        
        // 清除所有模型的按钮事件
        document.getElementById('clear-all').addEventListener('click', function() {
            viewer.removeAllModels();
            document.getElementById('model-list').innerHTML = '';
            modelCount = 0;
        });
        
        // 更新模型列表UI
        function updateModelList(name, url) {
            const modelList = document.getElementById('model-list');
            const index = modelCount;
            
            const modelItem = document.createElement('div');
            modelItem.className = 'model-item';
            modelItem.dataset.index = index;
            
            modelItem.innerHTML = `
                <span>${name} (${getFileName(url)})</span>
                <button class="remove-btn" data-index="${index}">移除</button>
            `;
            
            modelList.appendChild(modelItem);
            
            // 添加移除按钮事件
            modelItem.querySelector('.remove-btn').addEventListener('click', function() {
                const index = parseInt(this.dataset.index);
                if (viewer.removeModel(index)) {
                    modelItem.remove();
                }
            });
        }
        
        // 辅助函数：从URL获取文件名
        function getFileName(url) {
            return url.split('/').pop();
        }
        
        // 初始加载一个默认模型
        viewer.loadModel('./model/nexbot_robot_character_concept.gltf');
        updateModelList('默认模型', './model/nexbot_robot_character_concept.gltf');
        modelCount++;
    </script>
</body>
</html>